<!--
 * @Author: your name
 * @Date: 2021-04-25 09:13:45
 * @LastEditTime: 2021-04-25 19:24:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \day8\myapp\src\views\Home.vue
-->
<template>
  <div class="home">
    <h1>首页 ---饼状图---</h1>
    <div id="chartPie" class="pie-wrap"></div>
  </div>
</template>

<script>
 import * as echarts from 'echarts';
require('echarts/theme/macarons');

export default {
  name: 'Home',
  components: {
   
  },
   data () {
        return {
            chartPie: null
        }
    },
    mounted() {
      this.$nextTick(() => {
        this.drawPieChart();
      })
    },
    methods: {
      drawPieChart() {
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',      
          textStyle: mytextStyle
        };
        this.chartPie = echarts.init(document.getElementById('chartPie'),'macarons');
        this.chartPie.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['0', '70%'],
              center: ['50%', '50%'],
              data: [
                {value: 830, name: '直接访问'},
                {value: 950, name: '邮件营销'},
                {value: 1300, name: '联盟广告'},
                {value: 1548, name: '搜索引擎'}
              ],
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {           
                emphasis: mylabel
              }
            }
          ]
        });
      }
    }
}
</script>
<style scoped>
 .pie-wrap{
        width:100%;
        height:400px;
        color:"#000"
  }
element.style{
  color:#eee
}
</style>